<template>
	<view class="ku-comment-list">
		<view class="ku-comment-item" v-for="item in commentList">
			<view class="ku-comment-avatar">
				<u-avatar :src="src" shape="circle" size="38"></u-avatar>
				<!-- <u-avatar :text="text"></u-avatar> -->
			</view>
			<view class="ku-comment-body">
				<view class="ku-comment-head">
					{{item.name}} · {{item.time}}
				</view>
				<view class="">
					{{item.content}}
				</view>
				<view class="">
					<u-row customStyle="margin-top: 6px">
						<u-col span="4" offset="8">
							<u-row>
								<u-col span="4" @click="onCommentLike">
									<u-icon name="thumb-up-fill" size="20"></u-icon>
								</u-col>
								<u-col span="4" @click="commentEdit">
									<u-icon name="chat" size="20"></u-icon>
								</u-col>
								<u-col span="4">
									<u-icon name="more-dot-fill" size="18"></u-icon>
								</u-col>
							</u-row>
						</u-col>
					</u-row>
				</view>

			</view>
		</view>
		<!-- 提示框 -->
		<u-notify ref="commentNotify"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '无头像',
				commentList: [{
						name: '尼古拉斯·英俊',
						time: '10 分钟前',
						content: '这个方案有点问题，与用户预期不符，建议突出按钮用来提升转化率，文案也需要优化一下🤔'
					},
					{
						name: '尼古拉斯·英俊',
						time: '20 分钟前',
						content: '@伊丽莎白·黢黑 建议把按钮放在下面吧，文案我来出，稍后跟你同步一下✊'
					},
					{
						name: '弗朗西斯·俊美',
						time: '30 分钟前',
						content: '👌已经改好了，大家有时间看一下吧，另外我刚和开发沟通过，这个效果实现起来会有些成本，可能需要我们拉个会碰一下。'
					},

					{
						name: '尼古拉斯·英俊',
						time: '1小时前',
						content: '这个方案有点问题，与用户预期不符，建议突出按钮用来提升转化率，文案也需要优化一下🤔'
					},
					{
						name: '尼古拉斯·英俊',
						time: '2023-10-14 13:49:39',
						content: '这个方案有点问题，与用户预期不符，建议突出按钮用来提升转化率，文案也需要优化一下🤔'
					},

				]
			}
		},
		methods: {
			// 评论点赞
			onCommentLike() {
				this.$refs.commentNotify.success('点赞成功')
			},
			// 编辑留言
			commentEdit() {
				this.$emit('commentEdit'); 
			},
		}
	}
</script>

<style lang="scss">
	// 评论区
	.ku-comment-list {
		.ku-comment-item {
			display: flex;

			&.ku-comment-item {
				margin-top: 40rpx;
			}

			.ku-comment-avatar {
				width: 80rpx;
				height: 80px;
				margin-right: 20rpx;
			}

			.ku-comment-body {
				flex: 1;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #1A1A1A;

				.ku-comment-head {
					font-size: 24rpx;
					line-height: 36rpx;
					color: #979797;
				}
			}

		}

	}
</style>